<template>
  <el-header class='header'>
    <header class='navs'>
      <nav class='logo'>
        <img src='../../assets/logo.jpg' />
      </nav>
      <nav class='text'>
        <span>夕阳的博客</span>
      </nav>
      <nav class='menues'>
        <el-menu :default-active='activeIndex' class='menu-top el-menu-demo' mode='horizontal' @select='handleSelect' background-color='#1c2327' text-color='#e9e9eb' active-text-color='#00c1de'>
          <template v-for='menu in menus'>
            <el-submenu popper-clas='menu-sub' :index='menu.name' :key='menu.name' v-if='menu.children && menu.children.length > 0' popper-class='menu-sub-poper'>
              <template #title>{{ menu.title }}</template>
              <el-menu-item :index='submenu.name' v-for='submenu in menu.children' :key='submenu.name'>{{ submenu.title }}</el-menu-item>
            </el-submenu>
            <el-menu-item :index='menu.name' :key='menu.name' v-else>
              {{
              menu.title
              }}
            </el-menu-item>
          </template>
        </el-menu>
      </nav>
    </header>
  </el-header>
</template>
<script>
import { defineComponent } from 'vue';
import menus from './data';

export default defineComponent({
  name: 'sheader',
  data () {
    return {
      activeIndex: 'home',
      menus: menus,
    };
  },
  computed: {
    menuTop () {
      return { top: '60px', color: 'red' };
    }
  },
  methods: {
    handleSelect (index, indexPath, menu) {
    },
  },
  mounted () {
    var menuPop = document.querySelector('.menu-sub-poper');
    menuPop.style.top = '60px';
  }
});
</script>
<style lang="scss" scoped>
.header {
  width: 100%;
  // padding: 5px 0;
  background: #1c2327;
  height: 60px;
}
.navs {
  width: 1200px;
  margin: auto;

  .text {
    color: #fff;
    font-family: cursive;
    font-size: 20px;
    float: left;
    height: 60px;
    line-height: 60px;
    margin-right: 60px;
  }
  .logo {
    float: left;
    // margin-right: 60px;
    padding: 5px 0;
    img {
      border-radius: 60%;
      width: 40px;
      height: 40px;
    }
  }

  .menues {
    float: left;
  }
  .el-header {
    height: 60px;
  }
}
</style>
<style lang="scss">
.menu-sub-poper .el-menu--horizontal .el-menu .el-menu-item {
  text-align: center;
}
.menu-sub-poper .el-menu--popup {
  min-width: 127px;
}
</style>
